<template>
	<div class="dialog" v-show="flag">
		<div class="modal-bg" @click="$emit('handleClose')"></div>
		<Moudle :title="title" class="dialog-box" :class="{show: animate}">
			<div class="dialog-close" @click="$emit('handleClose')"><Icon type="close"/></div>
			<slot></slot>
		</Moudle>
	</div>
</template>

<script>
export default{
	props:['show', 'title'],
	data(){
		return{
			flag: false,
			animate: false
		}
	},
	watch:{
		show(val){
			if(val){
				this.flag = true;
				setTimeout(() => {
					this.animate = true;
				},0)
			}else{
				this.animate = false;
				setTimeout(() => {
					this.flag = false;
				}, 300)
			}
		}
	}
}
</script>

<style lang="less">
.dialog{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	font-size: 16px;
	z-index: 10000;
	.modal-bg{
		width: 100%;
		height: 100%;
	}
	.dialog-box.module-box{
		position: absolute;
		left: 50%;
		top: 50%;
		width: auto;
		min-width: 100px;
		min-height: 80px;
		padding: 15px 32px 8px 18px;
		transform: translate(-50%, -50%) scale(.01);
		background-color: rgba(0,22,22,.8);
		z-index: 10000;
		color: #fff;
		border-top-right-radius: 6px;
		border-top-left-radius: 6px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
		transition: all .3s;
		box-shadow: 0 1px 4px #eee;
		&.show{
			transform: translate(-50%, -50%) scale(1);
		}
		.dialog-close{
			position: absolute;
			right: -15px;
			top: 0px;
			width: 26px;
			height: 26px;
			line-height: 26px;
			text-align: center;
			border-radius: 50%;
			cursor: pointer;
			user-select: none;
			color: #fff;
			background-color: rgba(255,255,255,.4);
			z-index: 10001;
			box-shadow: 0 0 3px #000;
		}
	}
}
</style>
